<template>
  <div class="app-box">
    <div class="box-title">
        <div class="title-name">{{title}}</div>
        <div class="title-more">
            <slot name="more"></slot>
        </div>
    </div>
    <slot ></slot>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
  title: {type: String,default: '',},
  title2: {type: String,default: '',},
  
})

</script>

<style scoped lang="scss">
.app-box{
    padding: 10px 12px;
    background: linear-gradient(0deg,rgba(29,29,29,.4) 52%,rgba(61,171,255,.2));
    .box-title{
         display:flex;
         align-items: center;
         justify-content: space-between;
         position:relative;
         padding-bottom: 14px;
        .title-name{
            font-size: 21px;
            font-weight: 800;
            color: #00c0d1;
            background: linear-gradient(0deg,#9eccfb .41503906%,#d8f0fb);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        &:after{
            display: block;
            content: " ";
            position:absolute;
            bottom:0;
            left:0;
            width: 100%;
            height: 12px;
            background: url() 0 0 no-repeat;
            background-size: 100% 100%;
        }
    }
}
</style>